<template>
  <cover-view class="model "
              :class="show_rankings_model ? 'show_rankings_model' : ''">
    <cover-view class="model-head-title">
      <cover-image src="../../static/images/rank.png"
                   class="xiaohua"></cover-image>
      本局排行
      <cover-image src="../../static/images/rank.png"
                   class="xiaohua"></cover-image>
    </cover-view>
    <cover-view class="model-cont">
      <cover-view class="rank-single-member"
                  :class="'rank-single-member'+index"
                  v-for="(item,index) in rank_members "
                  :key="index">
        <cover-view class="rank-item rank-num">{{index+1}}
        </cover-view>
        <cover-image class="rank-item rank-img"
                     :src="item.avatarUrl">
        </cover-image>
        <cover-view class="rank-item rank-name">{{item.name}}
        </cover-view>
        <cover-view class="rank-item rank-score">{{item.score}}
        </cover-view>
      </cover-view>
    </cover-view>
    <cover-view class="model-footer-btn">
      <cover-view class="close-rank"
                  @tap="close_model">关闭</cover-view>
      <cover-view class="close-rank onece-again"
                  @tap="onece_again">再来一局</cover-view>
    </cover-view>
  </cover-view>
</template>
<script>
import store from '@/store';
export default {
    props: {
        show_rankings_model: Boolean,
        rank_members: Object,
    },
    methods: {
        onece_again() {
            store.dispatch('sendSocketMessage', {
                type: 'onece_again',
                data: {
                    house_id: this.house_id
                }
            });
            wx.showLoading({
                title: '打扫中请稍等..',
                mask: true
            });
        },
        // 关闭弹窗按钮
        close_model() {
            this.$emit('close_model')
            this.show_statistics_model = false;
            this.is_global_mask = false;
            this.show_rankings_model = false;
        },
    }
}
</script>


<style scoped >
/* 排行弹窗 */
.show_rankings_model.model {
  display: block;
}
.rank-single-member {
  height: 60px;
  line-height: 60px;
  margin: 10px auto;
}
.rank-single-member .rank-item {
  display: inline-block;
  margin: 0 15px;
  vertical-align: middle;
}
.rank-single-member.rank-single-member0 {
  color: #f54646;
}
.rank-single-member.rank-single-member1 {
  color: #f9ac39;
}
.rank-single-member.rank-single-member2 {
  color: #ffdd55;
}
.rank-single-member0 .rank-num {
  background: #f54646;
}
.rank-single-member1 .rank-num {
  background: #f9ac39;
}
.rank-single-member2 .rank-num {
  background: #ffdd55;
}
.rank-num {
  width: 20px;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  background: #8eb9f5;
}
.rank-img.rank-item {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.rank-name {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.model-footer-btn {
  height: 45px;
  line-height: 45px;
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
}
.close-rank {
  display: inline-block;
  width: 100px;
  height: 45px;
  line-height: 45px;
  margin: 0 30px;
  text-align: center;
  border-radius: 3px;
  color: #fff;
  background: #1aad19;
}
.onece-again {
  float: right;
}

/* 排行弹窗end */
</style>
<style scoped>
 /* 公共代码，由于使用import报错，所以暂时这样 */
.model {
  display: none;
  position: fixed;
  top: 50px;
  bottom: 50px;
  left: 10px;
  right: 10px;
  z-index: 21;
  background: #f0f8ff;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 rgba(194, 194, 194, 0.5);
}
.xiaohua {
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
.model-cont {
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 0;
  right: 0;
  padding: 0 20px;
  overflow-y: auto;
}
.model-head-title {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 25px;
  text-align: center;
}
</style>